<template>
    <div class="order-bor">
        <navtop title="订单结算" :fixed="true" />
        <div class="orderBuy">
            <div class="my-bg">
                <div class="select-address">
                    <div class="select-address-title" @click="selectAddress">选择地址</div>
                    <div class="arrow">
                        <van-icon name="arrow" />
                    </div>
                </div>

                <div class="userinfo-box">
                    <div class="userinfo">
                        <div class="username">{{ userSelectAddress.name }}</div>
                        <div class="phone">{{ userSelectAddress.tel }}</div>
                        <div v-show="userSelectAddress.isDefault">
                            <van-tag round color="#0C34BA">默认</van-tag>
                        </div>
                    </div>
                    <div class="detail-address">{{ userSelectAddress.address }}</div>
                </div>
            </div>

            <div class="order-info">
                <div class="info-name">订单信息</div>
                <div class="shopbag-list-item" v-for="item in shopbagData" :key="item.sid">
                    <van-swipe-cell>
                        <div class="shp-item">
                            <div class="shp-img">
                                <img class="auto-img" :src="item.small_img" alt="">
                            </div>
                            <div class="shopbag-item-content">
                                <div class="shopbag-name">
                                    <div class="zhname-box">
                                        <div class="zhname one-text">{{ item.name }}</div>
                                        <div class="rule one-text">{{ item.rule }}</div>
                                    </div>
                                    <div class="enname one-text">{{ item.enname }}</div>
                                </div>

                                <div class="price-count">
                                    <div class="price">&yen;{{ item.price }}</div>
                                    <div class="count">
                                        x{{ item.count }}
                                    </div>
                                </div>
                            </div>
                        </div>

                    </van-swipe-cell>
                </div>

                <div class="order-total">
                    <div class="order-count">共计 {{ count }} 件商品</div>
                    <div class="order-money">订单金额：&yen;{{ total }}</div>
                    <div class="left-circle circle"></div>
                    <div class="right-circle circle"></div>
                </div>
            </div>
        </div>

        <van-popup v-model:show="show" position="bottom" closeable>
            <div class="sel-address">
                <div class="sel-address-title">选择地址</div>
                <div>
                    <van-address-list v-model="chosenAddressId" :list="list" default-tag-text="默认" @add="addAddress"
                        @select="select" />
                </div>
            </div>
        </van-popup>

    </div>
    <div class="buy-now">
        <van-button round block color="#0C34BA" @click="pay">立即结算</van-button>
    </div>
</template>


<script setup lang="ts">

import navtop from "@/components/navtop.vue";

import { useRoute, useRouter } from "vue-router";

import { Toast } from "vant";

import { getCommitsh, getfindAddress, postPay } from "@/api/index";
// import { log } from "console";

let route: any = useRoute();

let router: any = useRouter()

// console.log(1);

let shopbagData: any = ref<Array<any>>([]);

let list: any = ref<Array<any>>([]);

let show: any = ref<boolean>(false);

let chosenAddressId: any = ref<string>('');

let userSelectAddress: any = ref<any>({
    tel: '',
    name: '',
    isDefault: false,
    address: ''
});

// show

let str = route.params.sids.split('-')

// console.log(route.params.sids);

const count = computed(() => {
    let count1 = 0;
    shopbagData.value.forEach((item) => {
        count1 = item.count + count1
    })
    return count1
})

const total = computed(() => {
    let count1 = 0;
    shopbagData.value.forEach((item) => {
        count1 = item.count * item.price + count1
    })
    return count1
})


let select = (item) => {
    for (let key in userSelectAddress.value) {
        userSelectAddress.value[key] = item[key];
    }
    show.value = false;
}

let pay = () => {
    if (userSelectAddress.value.address === '') {
        Toast('请选择地址')
    } else {
        postPay({
            sids: JSON.stringify(str),
            phone: userSelectAddress.value.tel,
            address: userSelectAddress.value.address,
            receiver: userSelectAddress.value.name

        }).then((result: any): void => {


            Toast(result.data.msg);

            if (result.data.code === 700) {
                router.push({ name: 'login' });
                return;
            }

            if (result.data.code === 60000) {
                //跳转到订单页面
                setTimeout(() => {
                    router.push({ name: 'Order' });
                }, 1000)

            }

        })
    }

}

// console.log(str);

getCommitsh({ sids: JSON.stringify(str) }).then((result) => {
    // console.log(result);

    if (result.data.code === 50000) {
        result.data.result.forEach((item: any): void => {
            item.isCheck = false;
        });
        shopbagData.value = result.data.result;

        console.log(shopbagData.value)
        if (shopbagData.value.length === 0) {
            router.go(-1)
        }
    }
})

onMounted(() => {
    getfindAddress().then((result) => {
        // if (result.data.code === 700) {
        //     Toast(result.data.msg);
        //     router.push({ name: 'login' });
        //     return;
        // }

        if (result.data.code === 20000) {
            result.data.result.forEach((item: any): void => {
                item.isDefault = Boolean(item.isDefault);
                item.address = `${item.province}${item.city}${item.county}${item.addressDetail}`;
                if (item.isDefault) {
                    chosenAddressId.value = item.id;
                    for (let key in userSelectAddress.value) {
                        userSelectAddress.value[key] = item[key];
                    }
                }
            })

            list.value = result.data.result;
            console.log(list.value)
        }


    })

    // if (count === 0) {
    //     console.log('没有商品')
    // }
})

let selectAddress = () => {
    show.value = true;
}


let addAddress = () => {
    console.log(1);
    router.push({ name: 'Address' });
}


// console.log(1);



</script>

<style lang="less" scoped>
.order-bor {
    width: 100vw;
    height: 100vh;
    background-color: #f3f3f3;
    position: relative;

    :deep(.van-address-item .van-radio__icon--checked .van-icon) {
        background-color: #0C34BA;
        border-color: #0C34BA;
    }

    :deep(.van-tag--danger) {
        background-color: #0C34BA;
    }

    :deep(.van-button--danger) {
        background-color: #0C34BA;
        border-color: #0C34BA;
    }

    :deep(.van-address-item__edit) {
        display: none;
    }

    :deep(.van-address-item) {
        padding: 10px 0;

    }

    :deep(.van-address-item__value) {
        padding-right: 0;
    }

    .sel-address-title {
        font-size: 16px;
        font-weight: bold;
        padding: 5px 0 10px;
    }

    .sel-address {
        padding: 10px;
        max-height: 500px;
        overflow-y: auto;
    }


}


.orderBuy {
    width: 100vw;
    height: auto;
    background-color: #f3f3f3;
    overflow-y: scroll;



    .my-bg {
        width: 93vw;
        min-height: 70px;
        padding: 10px;
        border-radius: 12px;
        margin: 0 auto;
        margin-top: 45px;
        background-color: #fff;
        position: relative;
        top: 10px;

        .detail-address {
            margin-top: 10px;
            font-size: 14px;
            color: #999;
        }

        .username {
            font-size: 14px;
            font-weight: bold;
        }

        .phone {
            font-size: 14px;
            color: #666;
            margin: 0 10px;
        }

        .userinfo {
            display: flex;
            align-items: center;
        }

        .userinfo-box {
            margin-top: 10px;
        }

        .select-address {
            display: flex;
            align-items: center;
            padding: 5px 0;
        }

        .select-address-title {
            font-size: 14px;
            font-weight: bold;
        }

        .arrow {
            width: 14px;
            height: 14px;
            margin-left: 5px;
            font-size: 14px;
        }

    }

    .order-info {
        width: 93vw;
        min-height: 70px;
        // padding: 10px;
        border-radius: 12px;
        margin: 0 auto;
        margin-top: 30px;
        margin-bottom: 70px;
        background-color: #fff;
        position: relative;
        top: 0;
    }

    .info-name {
        font-size: 14px;
        padding: 10px;
        font-weight: 700;
    }

    .shopbag-list-item {
        background-color: #fff;
        margin-bottom: 10px;
        border-radius: 10px;
        overflow: hidden;

        &:last-child {
            margin-bottom: 0;
        }

        .mydelectbtn {
            height: 100%;
        }

        :deep(.van-button) {
            height: 100%;
        }

        .shp-item {
            width: 100%;
            display: flex;
            padding: 10px;
            align-items: center;

            .shp-img {
                width: 80px;
                height: 80px;
                // margin-left: 10px;
                margin-right: 10px;

                .auto-img {
                    // border-radius: 5px;
                    width: 100%;
                }
            }

            .shopbag-item-content {
                width: calc(~"100%-40px");
                height: 80px;
                flex: 1;
            }

            .price {
                font-size: 14px;
                font-weight: bold;
                color: #e4393c;
                margin-right: auto;
            }

            .enname {
                font-size: 12px;
                color: #999;
                margin-top: 3px;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }

            .zhname {
                font-size: 14px;
                max-width: 100px;
            }

            .rule {
                margin-left: 20px;
                color: #666;
                font-size: 14px;
                max-width: 100px;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }

            .shopbag-name {
                height: 40px;
            }

            .price-count {
                margin-right: 20px;
                font-size: 12px;
                height: 40px;
                display: flex;
                align-items: center;
            }

            .zhname-box {
                display: flex;
            }
        }
    }

    .order-product {
        padding: 10px;
        margin-top: 30px;
        background-color: #fff;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .order-money {
        color: #e4393c;
        font-weight: bold;
        margin-left: auto;
    }

    .order-count {
        color: #666;
    }

    .order-total {
        display: flex;
        font-size: 14px;
        align-items: center;
        padding: 10px;
        border-top: 1px dashed #e8e8e8;
        position: relative;


    }



    // .bg-cover {}
}

.buy-now {
    position: fixed;
    left: 0;
    bottom: 0;
    // background-color: rgb(137, 30, 30);
    width: calc(~"100% - 20px");
    padding: 10px;
}
</style>
